 
    <link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/2/js-image-slider.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
 
    
    <div id="sliderFrame">
        <div id="slider">
          <img src="images/image-slider-1.jpg"   />
          
            <img src="images/image-slider-2.jpg"   />
            <img src="images/image-slider-3.jpg" />
            <img src="images/image-slider-4.jpg" />
        </div>
        <!--thumbnails-->
        <div id="thumbs">
            <div class="thumb">
                <div class="frame"><img src="images/thumb1.jpg" /></div>
                <div class="thumb-content"><p>HTML Content</p>Thumbnails allows any HTML content</div>
                <div style="clear:both;"></div>
            </div>
            <div class="thumb">
                <div class="frame"><img src="images/thumb2.jpg" /></div>
                <div class="thumb-content"><p>Customizable</p>Thumbnail style is customizable</div>
                <div style="clear:both;"></div>
            </div>
            <div class="thumb">
                <div class="frame"><img src="images/thumb3.jpg" /></div>
                <div class="thumb-content"><p>Variety of Layouts</p>Just a CSS tweak.</div>
                <div style="clear:both;"></div>
            </div>
            <div class="thumb">
                <div class="frame"><img src="images/thumb4.jpg" /></div>
                <div class="thumb-content"><p>Integration</p>Built-in functions for the thumbnails</div>
                <div style="clear:both;"></div>
            </div>
        </div>

        <!--clear above float:left elements. It is required if above #slider is styled as float:left. -->
        <div style="clear:both;height:0;"></div>
    </div>


   